<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>Model Convert Demo</title>
        <style type='text/css'>
            body {font-family: verdana}
            li {border: solid 1px gray; padding: 5px; width: 250px;}
			li a {color: red; font-weight: bold;}
			p {width: 400px;}
        </style>
	</head>
	<body>
<div id="demo-instructions">
		<h1>Model DOM Helpers Demo</h1>
		<p>This demo shows using models to set an instance on an element.</p>
</div>
<div id="demo-html">
<ul id='contacts'></ul>
</div>	
<script type='text/javascript' 
        src='../../steal/steal.js'>   
</script>
<script type='text/javascript'>
steal.plugins('jquery/model',
		'jquery/dom/fixture').start()
</script>
<script type='text/javascript'>
CONTACTS = [{'id': 1,'name' : 'Justin Meyer','birthday': '1982-10-20'},
			 {'id': 2,'name' : 'Brian Moschel','birthday': '1983-11-10'},
			 {'id': 3,'name' : 'Alex Gomes','birthday': '1980-2-10'}]
CONTACTS_FIXTURE =  function(){
				return [CONTACTS];
			};
			
// A contact model
$.Model.extend("Contact",{
	attributes : { 
		birthday : 'date'
	},
	convert : {
		date : function(raw){
			if(typeof raw == 'string'){
				var matches = raw.match(/(\d+)-(\d+)-(\d+)/)
				return new Date( matches[1], 
				                 (+matches[2])-1, 
				                 matches[3] )
			}else if(raw instanceof Date){
				return raw;
			}
		}
	},
	findAll : function(params, success, error){
		$.get("/recipes.json", {},
			this.callback(['wrapMany',success]),
			"json", CONTACTS_FIXTURE );
			
	},
	destroy : function(id, success, error){
		success({});
	}
},{
	ageThisYear : function(){
		return new Date().getFullYear() - 
			this.birthday.getFullYear()
	}

});
</script>
<script type='text/javascript' id="demo-source">   
Contact.findAll({},function(contacts){
  var contactsEl = $('#contacts');
  for(var i =0; i < contacts.length; i++){
   $('<li>').model(contacts[i])
            .html(contacts[i].ageThisYear()+
                  " <a>DELETE</a>")
            .appendTo(contactsEl)
  }
});
$("#contacts a").live('click', function(){
  //get the element for this recipe
  var contactEl = $(this).closest('.contact')
  
  // get the conctact instance
  contactEl.model()
           // call destroy on the instance
           .destroy(function(){
                      // remove the element
                      contactEl.remove();
                    })
		  
})

</script>
	</body>
</html>